  <!-- 分页 -->
<template>
  <div class="bottom-wrap flex">
    <div class="fs-16 cr-hui1">
      共<span class="cr-huang">{{ total }}</span
      >条
    </div>
    <el-pagination
      @current-change="setCurrentAction"
      @size-change="handleCurrentChange"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import { mapMutations, mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters("myPaging", {
      pageSize: "getPageSize",
      pageNum: "getPageNum",
    }),
  },
  name: "paging",
  props: {
    total: {
      //总条数
      type: [Number, String],
      default: 0,
    },
    size: {
      type: [String, Number],
      default: 10,
    },
  },
  created() {
    this.initPageOption({ total: this.total, pageSize: this.pageSizes[0] });
  },
  methods: {
    ...mapMutations("myPaging", ["changePageSize", "changePageNum"]),
    //当前页
    setCurrentAction(e) {
      this.changePageNum(e);
      this.$emit("onNum", e);
    },
    //条数
    handleCurrentChange(e) {
      this.changePageSize(e);
      this.$emit("onPage", e);
    },
  },
};
</script>

<style scoped lang="scss">
.bottom-wrap {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  div {
    span {
      margin: 0 6px;
    }
  }
  ::v-deep.btn-next {
    background-color: transparent !important;
  }
  ::v-deep.el-pager li {
    background-color: transparent !important;
    color: #5f717d;
  }
  ::v-deep.el-pagination__total {
    color: #5f717d;
  }
  ::v-deep.el-pagination__jump {
    color: #5f717d;
  }
  ::v-deep.el-pagination button:disabled {
    background-color: transparent !important;
  }
  ::v-deep.el-pager .number {
    color: #5f717d;
  }
  ::v-deep.el-pager .active {
    color: #5f717d;
  }
  ::v-deep.el-pagination__editor.el-input .el-input__inner {
    color: #5f717d;
  }
}
</style>